<template>
	<div class="changepassword">
		<div class="com-header border-1px">
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				忘记密码
			</div>
		</div>
		<div class="r-content">
			<div class="c-item border-1px">
				<input type="text" 
					placeholder="请输入您的手机号"
					v-model.trim="mobile"
				>
			</div>
			<div class="c-item border-1px">
				<input type="text" 
					placeholder="请输入验证码"
					v-model.trim="captcha"
				>
				<p @click="getCode()" class="code">{{verifyText}}</p>
			</div>
			<div class="c-item border-1px">
				<input type="password" 
					placeholder="请输入您的密码"
					v-model.trim="password"
					id="password"
				>
				<div class="eyes"
					@click="show(1)"
				>
					<i class="iconfont" v-show="isShow">&#xe61d;</i>
					<i class="iconfont" v-show="!isShow">&#xe62f;</i>
				</div>	
			</div>
			<div class="c-item border-1px">
				<input type="password" 
					placeholder="请确认您的密码"
					v-model.trim="repassword"
					id="repassword"
					@blur="equalcheck()"
				>
				<div class="eyes"
					@click="show(2)"
				>
					<i class="iconfont" v-show="isreShow">&#xe61d;</i>
					<i class="iconfont" v-show="!isreShow">&#xe62f;</i>
				</div>
			</div>
			<div class="submit"
				@click="change()"
			>
				<p>确认修改</p>
			</div>
		</div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	export default{
		data(){
			return{
				mobile: '',
				password: '',
				repassword: '',
				captcha: '',
				verifyText: '获取验证码',
				isreShow: true,
				isShow: true,
			}
		},
		methods: {
			equalcheck: function(){
				var p = document.getElementById('password'), c = document.getElementById('repassword');
				if (p.value != c.value) {
				    Toast('两次密码不一致')
				    return false;
				}else if(p.value != ''){
					return;
				}
			},
			show: function(type){
				const test = document.getElementById('password');
				const retest = document.getElementById('repassword');
				if(type == 1){
					this.isShow = !this.isShow
					if(this.isShow == true){
						test.type = "password";
					}else{
						test.type = "text";
					}	
				}else if( type == 2){
					this.isreShow = !this.isreShow
					if(this.isreShow == true){
						retest.type = "password";
					}else{
						retest.type = "text";
					}
				}
			},
			getCode: function (event) {
	            if (this.mobile === '') {
	                Toast('请先输入手机号码')
	                return
	            }
	            document.getElementById('help').style.display="none";
	            this.isSending = true;
	            var params = new URLSearchParams();
                params.append('mobile', this.mobile);
                params.append('event', 'resetpwd');
	            axios.post(Http.SMSSEND, params)
	                .then( res => {
	                    const ret = res.data
	                    if (ret['code'] === 1) {
	                        let count = 60;
	                        Toast('短信已发送');
	                        let tempObject = setInterval(() => {
	                            this.verifyText = count--;
	                            if (count <= 0) {
	                                this.isSending = false
	                                this.verifyText = '重新获取'
	                                clearInterval(tempObject)
	                            }
	                        }, 1000);
	                    } else {
	                        Toast(ret['msg'])
	                        this.isSending = false
	                    }
	                }, (res) => {
	                    this.isSending = false
	                })
		    },
		    change: function(){
		    	var params = new URLSearchParams();
                params.append('mobile', this.mobile);
                params.append('newpassword', this.password);
                params.append('captcha', this.captcha);
                axios.post(Http.RESETPWD, params).then( res => {
                	var ret =res.data;
                	var recode = ret['code']
                	if(recode === 1){
                		Toast("请重新登录");
                		this.$router.go(-1);
                	}else{
                		Toast(ret['msg'])
                	}
                })
		    },
		}
	}
</script>
<style lang="scss" scoped>
	.changepassword{
		.com-header{
			border-bottom: 0.1rem solid #f5f5f5;
		}
		.r-content{
			min-height: 11.8rem;
			background: #fff;
			.c-item{
				position: relative;
				text-align: left;
				width: 100%;
				height: 0.88rem;
				line-height: 0.88rem;
				font-size: 0.26rem;
				input{
					text-indent: 0.24rem;
					height: 0.88rem;
					width: 100%;
					vertical-align: top;
				}
				p{
					position: absolute;
					top: 0.14rem;
					right: 0.24rem;
					text-align: center;
					height: 0.6rem;
					line-height: 0.6rem;
					border-radius: 0.6rem;
					width: 2rem;
					&.paste{
						background: linear-gradient(to right,rgb(255,101,68), $color);
						color: #fff; 
					}
					&.code{
						border: 0.01rem solid #DCDFE6;
						color: #666;
					}
				}
				.eyes{
					position: absolute;
					top: 0;
					right: 4%;
					width: 0.88rem;
					height: 0.88rem;
					line-height: 0.88rem;
					text-align: center;
					.iconfont{
						font-size: 0.4rem;
					}
				}
			}
			.submit{
				margin: 0.3rem 8%;
				height: 0.88rem;
				line-height: 0.88rem;
				background: linear-gradient(to right,rgb(255,101,68), $color);
				box-shadow: 0 0 0.2rem rgb(255,101,68);
				border-radius: 0.88rem;
				color: #fff;
			}
			.tip{
				font-size: 0.20rem;
				span{
					color: rgb(255,101,68);
				}
			}
		}
	}
</style>